<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>主页面</title>
  <link rel="stylesheet" href="./lib/mui/css/normalize.css">
  <link rel="stylesheet" href="./lib/mui/css/mui.css">
  <link rel="stylesheet" href="./lib/mui/css/index.css">
  <script src="./lib/mui/js/mui.js"></script>
  <script src="./lib/flexible/index.js"></script>
  <!-- 引入模板引擎 -->
  <script src="./lib/template-web.js"></script>
  <!-- 引入jquery文件 -->
  <script src="./lib/jquery/jquery.js"></script>
  <!-- 引入主页文件 -->
  <script src="./lib/mui/js/index.js"></script>


</head>

<body>
  <!-- 主页  头部  模块 -->
  <header class="mui-bar mui-bar-nav">
    <a class="mui-icon mui-action-menu mui-icon-home mui-pull-right quit"></a>
    <h1 class="mui-title">欢迎你，宋代容</h1>
  </header>


  <!-- 轮播图区域 -->
  <div id="slider" class="mui-slider" style="margin-top: 0.586667rem;height:1.6rem">
    <div class="mui-slider-group mui-slider-loop">
      <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
      <div class="mui-slider-item mui-slider-item-duplicate">
        <ul class="subnav-entry">
          <li>
            <a href="">
              <span class="subnav-entry-icon-icon1"></span>
              <span>生活服务</span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="subnav-entry-icon-icon2"></span>
              <span>生活服务</span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="subnav-entry-icon-icon3"></span>
              <span>生活服务</span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="subnav-entry-icon-icon4"></span>
              <span>生活服务</span>
            </a>
          </li>

          <li>
            <a href="">
              <span class="subnav-entry-icon-icon4"></span>
              <span>生活服务</span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="subnav-entry-icon-icon4"></span>
              <span>生活服务</span>
            </a>
          </li>

          <li>
            <a href="">
              <span class="subnav-entry-icon-icon4"></span>
              <span>生活服务</span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="subnav-entry-icon-icon4"></span>
              <span>生活服务</span>
            </a>
          </li>

          <li>
            <a href="">
              <span class="subnav-entry-icon-icon4"></span>
              <span>生活服务</span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="subnav-entry-icon-icon4"></span>
              <span>生活服务</span>
            </a>
          </li>
        </ul>
      </div>
      <!-- 第一张 -->
      <div class="mui-slider-item">
        <ul class="subnav-entry">
          <li>
            <a href="">
              <span class="subnav-entry-icon-icon1"></span>
              <span>生活服务</span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="subnav-entry-icon-icon2"></span>
              <span>生活服务</span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="subnav-entry-icon-icon3"></span>
              <span>生活服务</span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="subnav-entry-icon-icon4"></span>
              <span>生活服务</span>
            </a>
          </li>

          <li>
            <a href="">
              <span class="subnav-entry-icon-icon5"></span>
              <span>生活服务</span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="subnav-entry-icon-icon6"></span>
              <span>生活服务</span>
            </a>
          </li>

          <li>
            <a href="">
              <span class="subnav-entry-icon-icon7"></span>
              <span>生活服务</span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="subnav-entry-icon-icon8"></span>
              <span>生活服务</span>
            </a>
          </li>

          <li>
            <a href="">
              <span class="subnav-entry-icon-icon9"></span>
              <span>生活服务</span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="subnav-entry-icon-icon10"></span>
              <span>生活服务</span>
            </a>
          </li>
        </ul>
      </div>
      <!-- 第二张 -->
      <div class="mui-slider-item">
        <ul class="subnav-entry">
          <li>
            <a href="">
              <span class="subnav-entry-icon-icon1"></span>
              <span>生活服务</span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="subnav-entry-icon-icon2"></span>
              <span>生活服务</span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="subnav-entry-icon-icon3"></span>
              <span>生活服务</span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="subnav-entry-icon-icon4"></span>
              <span>生活服务</span>
            </a>
          </li>

          <li>
            <a href="">
              <span class="subnav-entry-icon-icon4"></span>
              <span>生活服务</span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="subnav-entry-icon-icon4"></span>
              <span>生活服务</span>
            </a>
          </li>

          <li>
            <a href="">
              <span class="subnav-entry-icon-icon4"></span>
              <span>生活服务</span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="subnav-entry-icon-icon4"></span>
              <span>生活服务</span>
            </a>
          </li>

          <li>
            <a href="">
              <span class="subnav-entry-icon-icon4"></span>
              <span>生活服务</span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="subnav-entry-icon-icon4"></span>
              <span>生活服务</span>
            </a>
          </li>
        </ul>
      </div>
      <!-- 第三张 -->
      <div class="mui-slider-item">
        <ul class="subnav-entry">
          <li>
            <a href="">
              <span class="subnav-entry-icon-icon1"></span>
              <span>生活服务</span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="subnav-entry-icon-icon2"></span>
              <span>生活服务</span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="subnav-entry-icon-icon3"></span>
              <span>生活服务</span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="subnav-entry-icon-icon4"></span>
              <span>生活服务</span>
            </a>
          </li>

          <li>
            <a href="">
              <span class="subnav-entry-icon-icon4"></span>
              <span>生活服务</span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="subnav-entry-icon-icon4"></span>
              <span>生活服务</span>
            </a>
          </li>

          <li>
            <a href="">
              <span class="subnav-entry-icon-icon4"></span>
              <span>生活服务</span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="subnav-entry-icon-icon4"></span>
              <span>生活服务</span>
            </a>
          </li>

          <li>
            <a href="">
              <span class="subnav-entry-icon-icon4"></span>
              <span>生活服务</span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="subnav-entry-icon-icon4"></span>
              <span>生活服务</span>
            </a>
          </li>
        </ul>
      </div>
      <!-- 第四张 -->
      <div class="mui-slider-item">
        <ul class="subnav-entry">
          <li>
            <a href="">
              <span class="subnav-entry-icon-icon1"></span>
              <span>生活服务</span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="subnav-entry-icon-icon2"></span>
              <span>生活服务</span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="subnav-entry-icon-icon3"></span>
              <span>生活服务</span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="subnav-entry-icon-icon4"></span>
              <span>生活服务</span>
            </a>
          </li>

          <li>
            <a href="">
              <span class="subnav-entry-icon-icon4"></span>
              <span>生活服务</span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="subnav-entry-icon-icon4"></span>
              <span>生活服务</span>
            </a>
          </li>

          <li>
            <a href="">
              <span class="subnav-entry-icon-icon4"></span>
              <span>生活服务</span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="subnav-entry-icon-icon4"></span>
              <span>生活服务</span>
            </a>
          </li>

          <li>
            <a href="">
              <span class="subnav-entry-icon-icon4"></span>
              <span>生活服务</span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="subnav-entry-icon-icon4"></span>
              <span>生活服务</span>
            </a>
          </li>
        </ul>
      </div>
      <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
      <div class="mui-slider-item mui-slider-item-duplicate">
        <ul class="subnav-entry">
          <li>
            <a href="">
              <span class="subnav-entry-icon-icon1"></span>
              <span>生活服务</span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="subnav-entry-icon-icon2"></span>
              <span>生活服务</span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="subnav-entry-icon-icon3"></span>
              <span>生活服务</span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="subnav-entry-icon-icon4"></span>
              <span>生活服务</span>
            </a>
          </li>

          <li>
            <a href="">
              <span class="subnav-entry-icon-icon4"></span>
              <span>生活服务</span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="subnav-entry-icon-icon4"></span>
              <span>生活服务</span>
            </a>
          </li>

          <li>
            <a href="">
              <span class="subnav-entry-icon-icon4"></span>
              <span>生活服务</span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="subnav-entry-icon-icon4"></span>
              <span>生活服务</span>
            </a>
          </li>

          <li>
            <a href="">
              <span class="subnav-entry-icon-icon4"></span>
              <span>生活服务</span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="subnav-entry-icon-icon4"></span>
              <span>生活服务</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="mui-slider-indicator" style="margin-top:0.133333rem;">
      <div class="mui-indicator mui-active"></div>
      <div class="mui-indicator"></div>
      <div class="mui-indicator"></div>
    </div>
  </div>



  <!-- <button type="button" class="mui-btn mui-btn-royal">紫色</button> -->

  <!-- 猜你喜欢 -->
  <ul class="mui-table-view">

  </ul>


  <script id="tpl" type="text/html">
    <h2 style="font-size:0.4rem;color:gray;padding:0.133333rem 0.4rem;">猜你喜欢</h2>
        {{each}}
        <li data-id="{{$value.id}}" class="mui-table-view-cell mui-media goodslove">
            <a href="javascript:;">
                <!-- <img class="mui-media-object mui-pull-left" src="../images/shuijiao.jpg"> -->               
                 <img class="mui-media-object mui-pull-left" src="{{$value.img}}" style="width:0.56rem">
                <div class="mui-media-body shop_name">
                    {{$value.shop_name}}
                    <p class='mui-ellipsis shop_name_sub'>{{$value.shop_name_sub}}</p>
                    <p class="info">
                        <span class="price_current">&yen; <span class="pri_cur">{{$value.price_current}}</span> </span>
                        <span class="price_old" style="padding-left:-100px;text-decoration:line-through;">&yen;<span class="pri_old">{{$value.price_old}}</span></span>
                        <span class="on_sale">已售 <span class="sale_desc">{{$value.sale_desc}}</span></span>
                    </p>
                </div>
            </a>
        </li>
   
    {{/each }}
   </script>

  <div class="test"></div>

  <script type="text/html" id="tpl_detail_itro">
    {{each}}
    <h3>{{$value.shop_name}}</h3>
    <p>{{$value.shop_name_sub}}</p>
    {{/each}}
    </script>



  <!-- 导航部分 -->
  <!-- <nav class="mui-bar mui-bar-nav">
        <a class="mui-active mui-tab-item">
            <span class="mui-icon mui-icon-home">首页</span>
            <span class="mui-tab-label"></span>
        </a>

    </nav> -->





  <!-- 轮播图的js文件 -->
  <script>
    mui.init({
      swipeBack: true //启用右滑关闭功能
    });
    var slider = mui("#slider");
    slider.slider({
      interval: 2000
    });
  </script>


  <!-- 引入 主页的js文件 -->

</body>

</html>